<template>
  <div>
    <Button   type="primary"  @click="handleCurrentRowChanged">编辑</Button>
    <Drawer
        title="编辑项目"
        v-model="value"
        width="700"
        :mask-closable="true"
        :styles="styles">
      <Form  ref="myForm" :model="formData" >
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="模块名称" label-position="top"  prop="MName">
              <Input v-model="formData.MName" placeholder="输入模块名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="DAL服务名称" label-position="top" prop="DalName">
              <Input v-model="formData.DalName" placeholder="输入DAL服务名称" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="DAL容器端口" label-position="top" prop="DalContainerPort">
              <Input v-model="formData.DalContainerPort" placeholder="输入DAL容器端口" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="DAL管理端口" label-position="top" prop="DalManagerPort">
              <Input v-model="formData.DalManagerPort" placeholder="输入DAL管理端口" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="Dubbo端口" label-position="top" prop="DubboPort">
              <Input v-model="formData.DubboPort" placeholder="输入Dubbo端口" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="CLOUD服务名称" label-position="top" prop="CloudName">
              <Input v-model="formData.CloudName" placeholder="输入CLOUD服务名称" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="CLOUD服务端口" label-position="top" prop="CloudServicePort">
              <Input v-model="formData.CloudServicePort" placeholder="输入CLOUD服务端口" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="CLOUD管理端口" label-position="top" prop="CloudManagerPort">
              <Input v-model="formData.CloudManagerPort" placeholder="输入CLOUD管理端口" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="APP服务名称" label-position="top" prop="AppName" >
              <Input v-model="formData.AppName" placeholder="输入APP服务名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="APP服务端口" label-position="top" prop="AppServicePort">
              <Input v-model="formData.AppServicePort" placeholder="输入APP服务端口" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="APP管理端口" label-position="top" prop="AppManagerPort">
              <Input v-model="formData.AppManagerPort" placeholder="输入APP管理端口" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="value = false;">取消</Button>
        <Button type="primary" @click="saveSelectData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>

import axios from "axios";

export default {
  name: 'EditPort',
  props:['id'],
  inject:['reload'],
  data () {
    return {
      value: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        MName: '',
        DalName: '',
        DalContainerPort: '',
        DalManagerPort: '',
        DubboPort: '',
        CloudName: '',
        CloudServicePort: '',
        CloudManagerPort: '',
        AppName: '',
        AppServicePort: '',
        AppManagerPort: '',
      },
    }
  },

  methods: {
    saveSelectData(){
      axios.post(`http://172.30.53.223:8888/api/editport?id=${this.id}`,this.formData)
          .then(response => {
            this.$Message.success({ background: true, content: '修改成功' });
            console.log(response.data); // 根据后端返回的结果进行相应的处理
          })
          .catch(error => {
            // 请求失败处理
            console.error(error); // 处理错误情况
            this.$Message.error({ background: true, content: '修改失败' });
          });
      this.value=false
      this.reload()
    },
    handleCurrentRowChanged(){
      axios.get(`http://172.30.53.223:8888/api/select/port?id=${this.id}`)
          .then(response => {
            // 在请求成功的回调函数中处理返回的数据
            this.formData.MName = response.data.item.MName
            this.formData.DalName = response.data.item.DalName;
            this.formData.DalContainerPort = response.data.item.DalContainerPort;
            this.formData.DalManagerPort = response.data.item.DalManagerPort;
            this.formData.DubboPort = response.data.item.DubboPort;
            this.formData.CloudName = response.data.item.CloudName;
            this.formData.CloudServicePort = response.data.item.CloudServicePort;
            this.formData.CloudManagerPort = response.data.item.CloudManagerPort;
            this.formData.AppName = response.data.item.AppName;
            this.formData.AppServicePort = response.data.item.AppServicePort;
            this.formData.AppManagerPort = response.data.item.AppManagerPort;
            this.value=true
          }).catch(error => {
        // 请求发生错误时的处理
        console.log(error);
      });
    },
    background (type) {
      this.$Message[type]({
        background: true,
        content: '编辑成功'
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
